<template>
<div id="myChart" :style="{width: '1000px', height: '1000px'}"></div>
</template>

<script>
import listJson from './treedemo.json'
export default {
    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            listJson: {},
        }
    },
    mounted() {
        this.drawLine();
    },
    methods: {
        drawLine() {
            var _this = this;
            this.listJson = listJson;
            var data = _this.listJson;
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            // 绘制图表
            myChart.hideLoading();
            // this.$echarts.util.each(data.children, function (datum, index) {
            //     index % 2 === 0 && (datum.collapsed = true);
            // });
           myChart.setOption({
        tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
        },
        series: [
            {
                type: 'tree',

                data: [data],

                top: '18%',
                bottom: '14%',

                layout: 'radial',

                symbol: 'emptyCircle',

                symbolSize: 7,

                initialTreeDepth: 3,

                animationDurationUpdate: 750

            }
        ]
    });
        }
    }
}
</script>
